<template>
	<public-view navType="other" navTitle="背景音乐">
		<view class="bgmusic-box-list w-100 flex f-d-c a-i-c">
			<radio-group @change="radioChange">
				<label class="item w-100 flex a-i-c" v-for="(item, index) in music_list" :key="index">
					<view class="radio-box">
						<radio :value="index" color="#2567F3"  :checked="item.id == current" />
					</view>
					<view class="radio-text flex a-i-c j-c-b f-s-26">
						<view class="f-s-26 f-w-b">
							{{item.name}}
						</view>
						<view class="" style="color: #9d9d9d;">
							{{item.duration_}}
						</view>
					</view>
				</label>
			</radio-group>
			<view class="" style="height: 300rpx;">
				
			</view>
			<bottom-btn :positon="true" @click="requestData">确定</bottom-btn>
		</view>
	</public-view>
</template>

<script>
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	export default {
		components:{
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				page:1,
				current:0,
				music_list:[]
			}
		},
		onLoad(options) {
			if (options.checked_id) {
				this.current = options.checked_id
			}
		},
		onShow() {
			console.log(this.$root)
			this.getMusics()
			// this.paya()
		},
		onReachBottom() {
			this.page++
			this.getMusics()
		},
		methods: {
			// TODO: W
			getMusics(){
				// 直播短视频个人中心
				let that = this
				that.util.getRequest({
					url:"v1/music/index",
					data:{
						rows:10,
						page:that.page
					}
				}).then(res=>{
					console.log(res,"背景音乐列表")
					if(that.page === 1){
						that.music_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.music_list = that.music_list.concat(res.data.data)
						}else{
							// that.page--
						}
					}
					
					if (that.current == '0') that.current = that.music_list[0].id
				})
			},
			radioChange(e){
				let that = this
				that.current = that.music_list[e.detail.value].id
			},
			requestData(){
				let that = this
				if (that.current == 0) {
					uni.showToast({
						title:'请选择音乐',
						icon:'none'
					})
					return
				}
				let return_data = null
				let l = that.music_list.length
				for(let i =0; i < l; i++ ){
					if (that.music_list[i].id == that.current){
						return_data = that.music_list[i]
						break
					}
				}
				uni.$emit('find_select_music',return_data)
				// uni.$emit('find_select_music', JSON.parse(JSON.stringify(that.music_list[that.current])))
				uni.navigateBack()
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.item{
		width: 100%;
		margin-bottom: 20upx;
		.radio-text{
			width: 624upx;
			height: 108upx;
			background: #FFFFFF;
			border-radius: 32upx;
			padding: 0 24upx;
		}
		.radio-box{
			margin-right: 18upx;
		}
	}
	.bgmusic-box-list{
		padding: 28upx;
		
	}
</style>
